<script setup lang="ts">
import { ref, toRefs, reactive, watch, computed, watchEffect } from "vue";
import { DatePicker, Field, Popup, showNotify } from "vant";

interface DataArr {
  data: string[];
}

interface PropsData {
  modelValue: string[]; // 双向绑定值
  minDate?: Date; // 最小可选日期
  maxDate?: Date; // 最大可选日期
  title?: string;
  errMsg?: string; // 选择错误格式时的提示
}

const propsData = defineProps<PropsData>();

const emits = defineEmits<{
  (e: "update:modelValue", val: Array<string>): void;
}>();

const showPicker = ref(false);
// 选中样式
const active_class1 = ref("");
const active_class2 = ref("");

// 开始日期
const start = computed({
  get: () => propsData.modelValue[0],
  set: (val) => {
    emits("update:modelValue", [val, end.value]);
  },
});

// 结束日期
const end = computed({
  get: () => propsData.modelValue[1],
  set: (val) => {
    emits("update:modelValue", [start.value, val]);
  },
});

// 时间选择器的双向绑定
const timeval: DataArr = reactive({ data: [] });
const { data } = toRefs(timeval);
// 当前是选择开始时间还是结束时间，1是开始，2结束
const activePop = ref(1);
watchEffect(() => {
  if (!showPicker.value) {
    active_class1.value = "";
    active_class2.value = "";
  }
  if (start.value.replace(/\//g, "") > end.value.replace(/\//g, "")) {
    showNotify({ type: "warning", message: "开始时间不能大于结束时间" });
    data.value = start.value.split("/");
    emits("update:modelValue", [start.value, start.value]);
  }
});

watch(activePop, (newVal) => {
  if (newVal === 1) {
    active_class1.value = "active";
    active_class2.value = " ";
    data.value = start.value.split("/");
  } else {
    active_class1.value = "";
    active_class2.value = "active";
    data.value = end.value.split("/");
  }
});

// 是否展示重置按钮
const showResetBtn = computed(() => {
  if (start.value && end.value) {
    return true;
  }
  return false;
});

// 打开弹窗
function showPopup(index: number) {
  activePop.value = index;
  showPicker.value = true;
}

// 确认选择
function onConfirm(selectedDate: any) {
  const { selectedValues } = selectedDate;
  const dateVal = selectedValues.join("/");
  if (activePop.value === 1) {
    start.value = dateVal;
  } else {
    end.value = dateVal;
  }
  showPicker.value = false;
}

function resetDate() {
  // 重置选择器的值
  data.value = ["0", "0", "0"];
  // 重置起止时间
  emits("update:modelValue", ["", ""]);
}
</script>
<template>
  <div class="time-box">
    <Field
      class="time-field"
      @click="showPopup(1)"
      clearable
      v-model="start"
      placeholder="请选择"
      right-icon="notes-o"
      :class="active_class1"
      readonly
    />
    <span class="connect"></span>
    <Field
      class="time-field"
      @click="showPopup(2)"
      clearable
      v-model="end"
      placeholder="请选择"
      right-icon="notes-o"
      :class="active_class2"
      readonly
    />
    <div class="public-blue-font" v-if="showResetBtn" @click="resetDate">
      重置
    </div>
  </div>
  <popup v-model:show="showPicker" round position="bottom">
    <DatePicker
      v-model="data"
      @cancel="showPicker = false"
      @confirm="onConfirm"
      :min-date="propsData.minDate"
      :max-date="propsData.maxDate"
      :title="propsData.title"
    />
  </popup>
</template>

<style lang="scss" scoped>
.time-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .time-field {
    flex-wrap: wrap;
    border: 1px solid #eeeeee;
    padding: 5px 10px;
    border-radius: 4px;
  }
  .active {
    border: 1px solid #1677ff;
    :deep(.van-icon) {
      color: #1677ff;
    }
  }
  .connect {
    display: inline-block;
    width: 12px;
    height: 1px;
    background-color: #333333;
    margin: 0px 5px;
  }
  .public-blue-font {
    color: #1677ff;
    margin-left: 5px;
    min-width: 36px;
    font-size: 14px;
  }
}
.title {
  color: #666666;
  font-size: 16px;
  position: relative;
  display: flex;
  padding: 10px 0;
  align-items: center;
  padding-left: 15px;
  .con {
    flex: 1;
    text-align: right;
    margin-right: 10px;
  }
  .icons {
    color: #d4d4d4;
  }
}
</style>
